/*
 * @Author: AiLjx
 * @Date: 2022-08-02 15:11:19
 * @LastEditors: AiLjx
 * @LastEditTime: 2022-08-03 13:22:13
 */

const Title = "Ailjx";
// 这是giteePages的配置，我的Gitee Pages网站地址为： http://ailjx.gitee.io/js-route-demo
// 本地运行时将giteePagesPath设置为''空即可
const giteePagesPath = "/js-route-demo";
const routes = {
    "/": {
        page: "/pages/home/index.html",
        title: "home | " + Title,
        css: ["./pages/home/index.css"],
        js: ["./pages/home/index.js"],
        description: "Home",
    },
    "/about": {
        page: "/pages/about/index.html",
        title: "about | " + Title,
        css: [],
        js: ["./pages/about/index.js"],
        description: "About",
    },
    "/content": {
        page: "/pages/content/index.html",
        title: "content | " + Title,
        css: ["./pages/content/index.css"],
        js: ["./pages/content/index.js"],
        description: "Content",
    },
    "/404": {
        page: "/pages/404.html",
        title: "404 | " + Title,
        css: [],
        js: [],
        description: "404",
    },
};

for (const path in routes) {
    // 注册路由
    spaRouters.map(path, async function (transition) {
        // 导入html内容
        let response = "";

        response = await fetch(
            giteePagesPath
                ? giteePagesPath + routes[path].page
                : routes[path].page
        );
        const data = await response.text();
        // 截取body里的内容
        const bodyData = data.match(/<body[^>]*>([\s\S]+?)<\/body>/i)[1];
        document.querySelector("#root").innerHTML = bodyData;
        document.title = routes[path].title;
        document
            .querySelector('meta[name="description"]')
            .setAttribute("content", routes[path].description);
        // 导入css
        var _body = document.getElementsByTagName("body")[0];
        routes[path].css &&
            routes[path].css.forEach((cssItem) => {
                var link = document.createElement("link");
                link.setAttribute("rel", "stylesheet");
                link.setAttribute("href", cssItem);
                link.setAttribute("type", "text/css");
                _body.appendChild(link);
            });
        // 添加js文件
        routes[path].js &&
            routes[path].js.forEach((jsItem) => {
                // 通过asyncFun传入js文件路径和transition路由参数，异步懒加载js文件，在JS文件内做页面的处理
                spaRouters.asyncFun(jsItem, transition);
            });
    });
}

// 同步直接执行函数例子（不加载JS文件，直接在该函数内做页面的处理）
// spaRouters.map("/detail2", function (transition) {
//     spaRouters.syncFun(function (transition) {
//         document.getElementById("content").innerHTML =
//             '<p style="color:#DD8C6F;">当前同步渲染详情页' +
//             JSON.stringify(transition) +
//             "</p>";
//     }, transition);
// });

// 路由切换之前的回调
spaRouters.beforeEach(function (transition) {
    console.log("切换之前dosomething", transition);
    setTimeout(function () {
        //模拟切换之前延迟，比如说做个异步登录信息验证
        transition.next();
    }, 100);
});
// 路由切换之后的回调
spaRouters.afterEach(function (transition) {
    console.log("切换之后dosomething", transition);
});
// 开启路由
spaRouters.init();
